<template>
  <div class="stall-photo">

    <!--S顶部-->
    <roof
      :show-left-capsule="true"
      title="商家相册">
    </roof>
    <!--E顶部-->

    <!--S相册导航-->
    <div id="photo" :style="{top:systemInfo.statusBarHeight + capsule_height+'px'}">
      <scroll-view
        class="photo-scroll"
        :scroll-x="true"
        :scroll-with-animation="true"
        :scroll-left="photo_scroll_left"
      >
        <div
          class="photos-item"
          :class="item.photo_id === photos[photos_index].photo_id ? 'active' : ''"
          v-for="(item,index) in photos"
          :key="photo_id"
          @click="clickPhotosNav(index)"
          >
          {{item.name}}
          <div class="close" @click.stop="delPhotos" v-if="test_edit">
            <i class="iconfont icon-guanbi"></i>
          </div>
        </div>
        <div class="bottom_active">
          <div class="active" :style="{transform: 'translateX('+photos_bottom_active_x+'px)'}"></div>
        </div>
      </scroll-view>
    </div>
    <!--E相册导航-->

    <!--S内容-->
    <div id="content" :style="{'padding-top':content_padding_top+'px'}">
      <swiper
        class="content"
        :current="photos_index"
        :duration="content_duration"
        @change="contentChange"
      >
        <swiper-item
          class="content-item"
          v-for="item in photos"
          :key="photo_id"
        >
          <scroll-view
            class="content-scroll"
            :scroll-y="true">
            <photo-list :test_edit="test_edit"></photo-list>
          </scroll-view>
        </swiper-item>
      </swiper>
    </div>
    <!--E内容-->

    <!--S添加-->
    <div id="add-photo" @click="action_sheet.show = true">
      <i class="iconfont icon-kongzhitai"></i>
    </div>
    <!--E添加-->

    <!--S上拉菜单-->
    <action-sheet
      :options="action_sheet.data"
      :show="action_sheet.show"
      @cancel="action_sheet.show = false"
      @select="actionSheetSelect"
    ></action-sheet>
    <!--E上拉菜单-->

  </div>
</template>

<script>
  import store from '../../store/index'
  import roof from '../../components/roof/Roof'
  import StallPhotoList from '../../components/stall-photo-list/StallPhotoList'
  import { select, selectAll } from '../../utils/index'
  import actionSheet from '../../components/action-sheet/ActionSheet'
  export default{
    data () {
      return {
        // 顶部填充区域高度
        content_padding_top: 0,
        // 胶囊高度
        capsule_height: 0,
        // 商家id
        stall_id: 0,
        // document信息
        documents: {
          photos_items: [], // 相册导航的item
          photos_scroll_left: 0, // 相册滚动区域的left值
          photos_bottom_active_width: 0 // 相册导航底部选中标记宽度
        },
        // 相册
        photos: [
          {
            name: '全部',
            photo_id: 0
          },
          {
            name: '菜单相册',
            photo_id: 1
          },
          {
            name: '菜品',
            photo_id: 2
          },
          {
            name: '环境',
            photo_id: 3
          },
          {
            name: '顾客',
            photo_id: 4
          },
          {
            name: '员工',
            photo_id: 5
          },
          {
            name: '其他',
            photo_id: 6
          }
        ],
        // 相册导航下标
        photos_index: 0,
        // 相册导航滚动位置
        photo_scroll_left: 0,
        // 相册选中滑动标记为位置
        photos_bottom_active_x: 0,
        // 内容滑动区域动画时长
        content_duration: 500,
        // 上拉菜单
        action_sheet: {
          data: [
            {
              text: '创建相册',
              value: 'create-photo'
            },
            {
              text: '上传照片',
              value: 'upload-photo'
            },
            {
              text: '编辑',
              value: 'edit'
            }
          ],
          show: false
        },
        // 是否为编辑状态
        test_edit: false
      }
    },
    computed: {
      // 设备信息
      systemInfo () {
        return store.state.systemInfo
      },
      // 胶囊位置信息
      capsulePosition () {
        return store.state.capsule
      }
    },
    components: {
      roof,
      'photo-list': StallPhotoList,
      'action-sheet': actionSheet
    },
    onLoad (options) {
      this.stall_id = options.stall_id
    },
    mounted () {
      this.setCapsuleHeight()
      this.setContentPaddingTop()
    },
    onShow () {
      this.photos_index = 0
      this.getPhotosScrollLeft()
        .then(() => {
          return this.getPhotosItems()
        })
        .then(() => {
          return this.getPhotosBottomActiveWidth()
        })
        .then(() => {
          this.setPhotosActivePosition()
        })
    },
    methods: {
      // Run
      /**
       * 设置胶囊的高度
       */
      setCapsuleHeight () {
        this.capsule_height = this.capsulePosition.height + ((this.capsulePosition.top - this.systemInfo.statusBarHeight) * 2)
      },
      /**
       * 设置内容区域的padding-top
       */
      setContentPaddingTop () {
        select('#photo')
          .then((res) => {
            this.content_padding_top = this.systemInfo.statusBarHeight + this.capsule_height + res[0].height
          })
      },
      /**
       *获取相册滚动区域的left值
       */
      getPhotosScrollLeft () {
        return new Promise((resolve) => {
          select('.photo-scroll')
            .then((res) => {
              this.documents.photos_scroll_left = res[0].left
              resolve()
            })
        })
      },
      /**
       *获取相册导航子级document
       */
      getPhotosItems () {
        return new Promise((resolve) => {
          selectAll('.photos-item')
            .then((res) => {
              this.documents.photos_items = res[0]
              resolve()
            })
        })
      },
      /**
       *获取相册底部导航选中标记宽度
       */
      getPhotosBottomActiveWidth () {
        return new Promise((resolve) => {
          select('.bottom_active .active')
            .then((res) => {
              this.documents.photos_bottom_active_width = res[0].width
              resolve()
            })
        })
      },

      // Handle
      /**
       *设置底部导航选中状态标记的位置
       */
      setPhotosActivePosition () {
        let photoItem = this.documents.photos_items[this.photos_index]
        this.photos_bottom_active_x = (photoItem.left - this.documents.photos_scroll_left) + ((photoItem.width - this.documents.photos_bottom_active_width) / 2)
        let centerLeft = this.systemInfo.windowWidth / 2
        this.photo_scroll_left = photoItem.left - (centerLeft - photoItem.width / 2)
      },
      /**
       * 点击相册导航
       */
      clickPhotosNav (index) {
        this.content_duration = 0
        setTimeout(() => {
          this.photos_index = index
          this.setPhotosActivePosition()
          this.content_duration = 500
        })
      },
      /**
       * 滑动内容后触发事件
       */
      contentChange (ev) {
        this.photos_index = ev.target.current
        this.setPhotosActivePosition()
      },
      /**
       * 选择上拉菜单事件
       */
      actionSheetSelect (ev) {
        let doing = this.action_sheet.data[ev].value
        if (doing === 'create-photo') {
          console.log('创建相册')
        } else if (doing === 'upload-photo') {
          console.log('上传图片')
        } else if (doing === 'edit') {
          this.test_edit = true
          let cancelEdit = {
            text: '取消编辑',
            value: 'cancel-edit'
          }
          this.action_sheet.data.splice(2, 1, cancelEdit)
        } else if (doing === 'cancel-edit') {
          this.test_edit = false
          let cancelEdit = {
            text: '编辑',
            value: 'edit'
          }
          this.action_sheet.data.splice(2, 1, cancelEdit)
        }
      },
      /**
       * 删除相册
       */
      delPhotos () {
        console.log('删除相册')
      }
    }
  }
</script>
<style scoped lang="less" src="./index.less"></style>
